<template>
    <div class="app-container">
        <content-title></content-title>
        <div class="filter-container">
            <link-button class-name="filter-item" :route-name-prefix="$options.name" route-name="Add"
                         icon="el-icon-plus">
            </link-button>
            <el-input v-model="queryParams.name" clearable class="filter-item" placeholder="名称"
                      style="width: 200px;margin-left: 10px;margin-right:5px"
                      @keyup.enter.native="getList"/>
            <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getList">
                搜索
            </el-button>
        </div>

        <el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中..."
                  style="width: 100%" border fit highlight-current-row>
            <el-table-column align="center" label="序号">
                <template slot-scope="scope">
                    {{ scope.$index+1+ (queryParams.current-1)*queryParams.size }}
                </template>
            </el-table-column>
                         <el-table-column align="center" label="角色名称">
                <template slot-scope="scope">
                            {{ scope.row.name }}
                </template>
             </el-table-column>
             <el-table-column align="center" label="描述">
                <template slot-scope="scope">
                            {{ scope.row.description }}
                </template>
             </el-table-column>

            <el-table-column align="center" label="创建时间">
                <template slot-scope="scope">
                    {{ scope.row.createTime }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <link-button style="margin-right: 5px" type="text" :route-name-prefix="$options.name"
                                 route-name="Detail"
                                 :bid="scope.row.id">
                    </link-button>
                    <link-button style="margin-right: 5px" type="text" :route-name-prefix="$options.name"
                                 route-name="Edit"
                                 :bid="scope.row.id">
                    </link-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="queryParams.current" :limit.sync="queryParams.size"
                    @pagination="getList"/>
    </div>
</template>

<script>
    import {pageList} from '@/api/role'
    import waves from '@/directive/waves' // waves directive
    import Pagination from '@/components/Pagination' // secondary package based on el-pagination

    export default {
        name: 'role',
        components: {Pagination},
        directives: {waves},
        data() {
            return {
                total: 0,
                list: [],
                listLoading: true,
                queryParams: {
                    size: 10,
                    current: 1,
                    name: ""
                },
            }
        },
        created() {
            this.getList()
        },
        methods: {
            getList() {
                this.$business.list(this, pageList)
            }
        }
    }
</script>
